<template>
  <el-form
    label-position="top"
    label-width="80px"
    :model="formdata"
    class="widget-container"
    style="padding: 0px 20px 0px 20px"
  >
    <el-form-item label="尺寸(px)">
      <el-col class="line" :span="2" style="color: #606266">宽</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.w"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
      <el-col class="line" :span="2" style="color: #606266">高</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.h"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="位置(px)">
      <el-col class="line" :span="2" style="color: #606266">x</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.x"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
      <el-col class="line" :span="2" style="color: #606266">y</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.y"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="formdata.name" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="formdata.rm" />
    </el-form-item>
    <el-form-item label="旋转（角度）">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-slider v-model="formdata.rotate" :min="0" :max="360" />
        </el-col>
        <el-col :span="6">
          <el-input-number
            v-model="formdata.rotate"
            style="width: 100px"
            controls-position="right"
          />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="内容">
      <el-input
        v-model="formdata.v"
        type="textarea"
        :rows="4"
        @blur="changeContent"
      />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="字体">
      <el-select v-model="formdata.fn" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="item in fonts"
          :key="item.value"
          :style="`font-family:${item.value}`"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="字号">
      <el-input-number v-model="formdata.h" controls-position="right" />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="颜色">
      <el-color-picker v-model="formdata.c" />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="背景颜色">
      <el-color-picker v-model="formdata.bgColor" />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'image'" label="图片">
      <el-upload
        class="upload-demo"
        :headers="myHeaders"
        :action="$store.getters.updateURL + 'material/upload'"
        :on-success="handleSuccess"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <!-- 暂时不支持颜色修改 -->
    <!-- <el-form-item v-if="formdata.t == 'qrcode'" label="颜色">
      <el-color-picker
        v-model="formdata.c"
        @change="changeColor"
      />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'qrcode'" label="背景色">
      <el-color-picker
        v-model="formdata.bgc"
        @change="changeColor"
      />
    </el-form-item> -->
    <div class="layerBtn">
      <i class="el-icon-upload2" @click="changeLayer('top')" />
      <i class="el-icon-top" @click="changeLayer('add')" />
      <i class="el-icon-bottom" @click="changeLayer('sub')" />
      <i class="el-icon-download" @click="changeLayer('bottom')" />
    </div>
    <div v-if="formdata.t == 'text'" class="layerBtn fontBtn">
      <i @click="changeFont('left')">左对齐</i>
      <i @click="changeFont('center')">居中</i>
      <i @click="changeFont('right')">右对齐</i>
    </div>
  </el-form>
</template>

<script>
import '@/assets/fonts/ali-font.css'
import { getToken } from '@/utils/auth'

export default {
  name: 'Widget',
  props: ['formdata', 'index'],
  data() {
    return {
      myHeaders: { Authorization: 'Bearer ' + getToken() },
      fonts: [
        {
          label: '阿里巴巴普惠体-Light',
          value: 'ali-light'
        },
        {
          label: '阿里巴巴普惠体-Regular',
          value: 'ali-Regular'
        },
        {
          label: '阿里巴巴普惠体-Medium',
          value: 'ali-Medium'
        },
        {
          label: '阿里巴巴普惠体-Bold',
          value: 'ali-Bold'
        },
        {
          label: '阿里巴巴普惠体-Heavy',
          value: 'ali-Heavy'
        }
      ]
    }
  },
  created() {},
  methods: {
    changeColor() {
      this.$emit('changeColor')
    },
    // 上传成功
    handleSuccess(res, file) {
      this.formdata.v = res.data.url
    },
    changeContent() {
      if (this.formdata.t === 'qrcode') {
        this.$emit('changeQrcode', {
          index: this.index,
          item: this.formdata
        })
      }
    },
    changeLayer(type) {
      this.$emit('changeLayer', {
        index: this.index,
        type: type
      })
    },
    changeFont(type) {
      this.$emit('changeFont', {
        index: this.index,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.widget-container .free-poster-tools .el-input__inner {
  padding: 0;
}
.layerBtn {
  display: block;
  width: 100%;
  padding: 5px;
  border-radius: 8px;
  background: #f6f7f9;
  margin-bottom: 5px;
}
.layerBtn i {
  font-size: 20px;
  line-height: 30px;
  display: inline-block;
  width: 25%;
  text-align: center;
  cursor: pointer;
}
.layerBtn.fontBtn i {
  width: 33%;
  font-size: 12px;
  font-style: normal;
}
.layerBtn i.active {
  color: #f84311;
}
.layerBtn i:hover {
  color: #f84311;
}
.layerBtn i.disabled {
  color: #ccc;
}
</style>
